<template>
  <div class="layout-container">
    <div class="layout-container-form flex space-between">

      <div class="layout-container-form-search">
        <el-input
            clearable
            v-model="query.account"
            placeholder="输入账号搜索"
            @change="getTableData(true)">

        </el-input>
        <el-input
            clearable
            v-model="query.union_code"
            placeholder="邀请码搜索"
            @change="getTableData(true)">

        </el-input>
        <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getTableData(true)">搜索</el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <Table
          ref="table"
          v-model:page="page"
          v-loading="loading"
          :showIndex="false"
          :showSelection="false"
          :data="tableData"
          @getTableData="getTableData"
      >
        <el-table-column
            prop="id"
            label="用户ID"
            align="center"
        />
        <el-table-column
            prop="account"
            label="账号"
            align="center"
            min-width="100px"
        />
        <el-table-column
            prop="union_code"
            label="邀请码"
            align="center"
        />
        <el-table-column
            prop="nickname"
            label="昵称"
            align="center"
        />
        <el-table-column
            prop="status"
            label="状态"
            align="center"
            min-width="50px"
        >
        <template v-slot="{row}">
          <el-tag type="success" v-if="row.status==0" >{{row.status_text}}</el-tag>
          <el-tag type="warning" v-if="row.status==1" >{{row.status_text}}</el-tag>
        </template>
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
            align="center"
        />
        <el-table-column
            prop="loginCount"
            label="登录次数"
            align="center"
        />
        <el-table-column
          prop="add_time"
          label="更新时间"
          align="center"
          min-width="150px"
        />
        <el-table-column
          prop="add_time"
          label="添加时间"
          align="center"
          min-width="150px"
        />
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          min-width="150px"
          >
          <template v-slot="{row}">
            <el-button
              size="mini"
              type="success"
              @click="$router.push({path:'form',query:{id:row.id,nickname:row.nickname}})"
              >
              编辑
            </el-button>
            <el-button
                size="mini"
                type="warning"
                v-if="row.status==0"
                @click="changeStatus(row)"
            >
              禁用
            </el-button>
            <el-button
                size="mini"
                type="primary"
                v-else-if="row.status==1"
                @click="changeStatus(row)"
            >
              恢复
            </el-button>
          </template>
        </el-table-column>

      </Table>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import Table from '@/components/table/index.vue'
import req from '@/utils/system/req'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
  name: '用户列表',
  components: {
    Table,

  },
  setup() {
    // 存储搜索用的数据
    const query = reactive({
      keyword: ''
    })


    // 分页参数, 供table使用
    const page = reactive({
      index: 1,
      size: 10,
      total: 0
    })
    const loading = ref(true)
    const tableData = ref([])
    const chooseData = ref([])

    // 获取表格数据
    // params <init> Boolean ，默认为false，用于判断是否需要初始化分页
    const getTableData = (init) => {
      loading.value = true
      if (init) {
        page.index = 1
      }
      let params = {
        page: page.index,
        pageSize: page.size,
        ...query
      }
      req({
        url: '/member/list_data',
        method: 'post',
        data: params
      })
          .then(res => {
            let data = res.data
            tableData.value = data.data
            page.total = Number(data.total)
          })
          .catch(error => {
            tableData.value = []
            page.index = 1
            page.total = 0
          })
          .finally(() => {
            loading.value = false
          })
    }

    const changeStatus = (row)=>{
      ElMessageBox.confirm(
          '确定要'+(row.status==0?'禁用':'恢复')+'账号吗',
          '操作提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            let params = {
              uid:row.uid,
              id:row.id,
              status:row.status==1?0:1
            }
            req({
              url: '/member/save_data',
              method: 'put',
              data: params
            })
                .then(res => {

                  ElMessage({
                    type: res.code==0? 'success':'error',
                    message: res.msg,
                  })
                  if (res.code==0) {
                    getTableData(true)
                  }
                })
                .catch(error => {
                  ElMessage({
                    type: 'error',
                    message: '网络超时',
                  })
                })
                .finally(() => {
                  loading.value = false
                })

          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '操作已取消',
            })
          })
    }


    getTableData(true)
    return {
      query,
      tableData,
      chooseData,
      loading,
      page,
      getTableData,
      changeStatus
    }
  }
})
</script>

<style lang="scss" scoped>

</style>